import React, { Component } from 'react';
import {
  StyleSheet, Text, View, Image, TouchableOpacity, Animated
} from "react-native";
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
import { OrderCommon } from '../../_common/common';

const arrowIcon = require('../../../../imgs/order/down.png')
const scale = GLOBAL.SCALE;

export class ListPageComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      heightObj: new Animated.Value(55 * scale),
      imgObj: new Animated.Value(0),
      onoff: false,
      itemData: {},
    }
    this.onOff = true;
    this.pageParams = {
      pageNo: 1,
      pageSize: 10,
      orderType: 'P',
    }
  }

  componentDidMount = () => { }


  //点击动画下拉
  _startSlaf = (num) => {
    let { onoff, heightObj, imgObj } = this.state;
    if (onoff) {
      Animated.timing(imgObj, { toValue: 0, duration: 200, }).start()
      Animated.timing(heightObj, { toValue: 55 * scale, duration: 200, }).start(() => { this.setState({ onoff: false }) });
    } else {
      Animated.timing(imgObj, { toValue: 1, duration: 200, }).start()
      Animated.timing(heightObj, { toValue: 33 * num * scale, duration: 200 }).start(() => { this.setState({ onoff: true }) })
    }
  }

  render () {
    let { heightObj, imgObj, } = this.state;
    let { item, onGetCheckApprove, onConsentCreate, onGoItemFrame, onConsentRenew, choice } = this.props;
    if (item && item.orderInfo && item.orderInfo.bizTeamNameList) {
      item.orderInfo.bizTeamNameList.toString();
    }
    const spin = imgObj.interpolate({
      inputRange: [0, 1],//输入值
      outputRange: ['0deg', '180deg'] //输出值
    })
    return (
      <View style={{
        marginTop: 20 * scale, paddingLeft: 12 * scale,
        paddingRight: 12 * scale,
      }}>
        <View style={styles.itemTimeData}>
          <View style={{ flex: 6, }}>
            <Text style={styles.itemLightName}>{item && item.orderInfo ? item.orderInfo.companyName : '--'}</Text>
          </View>
          <View style={{ justifyContent: 'flex-end', position: 'relative', flexDirection: 'row', right: 0 }}>
            <Text style={[styles.itemLightText, { color: '#848A96' }]}>{item && item.orderInfo ? item.orderInfo.createTime : '--'}</Text>
          </View>
        </View>
        <View activeOpacity={.6} style={styles.itemWrap} >
          <View style={styles.itemName}>
            <View style={{ alignItems: 'flex-start' }}>
              <Text style={styles.itemLightText}>{item && item.orderInfo ? item.orderInfo.orderId : '--'}</Text>
            </View>
            <Image style={styles.itemTypeName} source={item && item.orderInfo && item.orderInfo.tradeType == 'I' ? OrderCommon.iconData.innerImg : OrderCommon.iconData.outerImg} />
            <View style={{
              marginBottom: 1 * scale, position: 'absolute',
              top: 0,
              right: 28 * scale,
              paddingTop: 2 * scale,
            }}>
              <Text style={styles.itemLightColor} onPress={() => { onGoItemFrame && onGoItemFrame(item) }}>[查看框架]</Text>
            </View>
          </View>
          <Text style={{ fontSize: 10 * scale, paddingLeft: 12 * scale, paddingBottom: 10 * scale, color: '#848A96' }}>(业务组织：{choice.corpName || '-'})</Text>
          <View style={{ flexDirection: 'row', marginBottom: 10 * scale, position: 'relative', paddingRight: 20 * scale, paddingLeft: 12 * scale, paddingRight: 12 * scale, }}>
            <View style={styles.itemType}>
              <Text style={{ color: '#000000', fontSize: 12 * scale, fontWeight: '600', paddingTop: 2 * scale }}>业务员：</Text>
            </View>
            <Text style={{ color: '#000000', fontSize: 12 * scale, fontWeight: '600', width: 268 * scale, flexDirection: 'row' }}>
              {item && item.orderInfo && item.orderInfo.bizStaffName || item.orderInfo.bizTeamName ?
                `${item.orderInfo.bizStaffName || '--'} | ${item.orderInfo.bizTeamName || '--'}` : '--'}
            </Text>
          </View>
          <View style={{ flexDirection: 'row', marginBottom: 15 * scale, position: 'relative', paddingRight: 20 * scale, paddingLeft: 12 * scale, paddingRight: 12 * scale, }}>
            <View style={[styles.itemType]}>
              <Text style={{ color: '#000000', fontSize: 10 * scale, fontWeight: '600', opacity: 0.5 }}>送审备注：</Text>
            </View>
            <Text style={{ flex: 7, color: '#000000', fontSize: 10 * scale, fontWeight: '600', opacity: 0.5, marginTop: -1 * scale }}>{item && item.orderInfo && item.orderInfo.auditRemark ? item.orderInfo.auditRemark : '--'}</Text>
          </View>
          <View style={styles.itemBorder}></View>

          <View style={{ marginBottom: 15 * scale, }}>
            <Animated.View style={[styles.itemBody, item.orderItemList && item.orderItemList.length > 2 ? { height: heightObj } : null]}>

              {item.orderItemList && item.orderItemList.length && item.orderItemList.map((items, index) => {
                return (
                  <View style={styles.goodsItem} key={index}>
                    <View style={{ flex: 5 }}>
                      <Text style={styles.itemLightText}>{items.goodsName || '--'}</Text>
                    </View>
                    <View style={{ marginBottom: 5 * scale }}>
                      <Text style={styles.itemLightNamber}> 长约总量  {items.quantity ? items.quantity : '--'} {items.quantity ? items.uomName : '吨'}</Text>
                    </View>
                  </View>
                )
              })
              }
            </Animated.View>



            {item.orderItemList && item.orderItemList.length > 2 ? (
              <TouchableOpacity style={styles.more} activeOpacity={1} onPress={() => { this._startSlaf(item.orderItemList.length) }}>
                <Animated.Image style={[styles.downImg, { transform: [{ rotateX: spin }] }]} source={arrowIcon} ></Animated.Image>
              </TouchableOpacity>
            ) : null

            }

            {item.orderItemList ? (
              <View style={styles.itemBorder}></View>
            ) : ''
            }
            <View style={styles.itemDayTime}>
              <Text style={styles.itemApprovalFlow} onPress={() => { onGetCheckApprove && onGetCheckApprove(item) }}>[审批流]</Text>
              <Text style={[styles.consent, styles.consentColor]} onPress={() => { onConsentCreate && onConsentCreate(item) }}>同意</Text>
              <Text style={styles.itemdown} onPress={() => {
                onConsentRenew && onConsentRenew(item)
              }}>驳回</Text>
            </View>
          </View>
        </View>
      </View >
    )

  }
}

const styles = StyleSheet.create({

  tabItems: {
    color: style.color.white,
    fontSize: 12 * scale,
    width: '35%',
    textAlign: 'center',
    marginTop: 20 * scale,
    opacity: .8
  },
  tabItemActive: {
    opacity: 1
  },
  stateView: {
    flexDirection: 'row',
    paddingTop: 10 * scale,
    backgroundColor: style.color.themeColor,
  },
  stateItem: {
    // paddingTop: 10 * scale,
    // paddingBottom: 10 * scale,
    // paddingLeft: 10 * scale,
    // paddingRight: 10 * scale,
    padding: 8 * scale,
    borderWidth: 1 * scale,
    borderStyle: 'solid',
    borderColor: style.color.themeColor,
    borderRadius: 20 * scale,
    marginRight: 10 * scale,
    flexDirection: 'row'
  },
  stateItemText: {
    paddingLeft: 2 * scale,
    paddingRight: 2 * scale,
    fontSize: 11 * scale,
    color: style.color.themeColor,
    fontWeight: '500',
  },
  stateItemInfo: {
    width: 5 * scale,
    height: 5 * scale,
    backgroundColor: style.color.fontRed1,
    borderRadius: 3 * scale,
    position: 'relative',
    top: -5 * scale
  },
  stateItemActive: {
    backgroundColor: style.color.themeColor,
  },
  stateActive: {
    backgroundColor: style.color.white,
  },
  stateItemTextActive: {
    fontSize: 11 * scale,
    color: style.color.white
  },
  stateItemInfoActive: {
    backgroundColor: style.color.white
  },
  body: {
    flex: 1,
    backgroundColor: style.color.bgGray
  },
  itemLightText: {
    fontSize: 12 * scale,
    color: '#272727',
    fontWeight: '500',
  },
  itemLightNamber: {
    fontSize: 12 * scale,
    color: '#000000',
    fontWeight: '300',
  },
  itemTimeData: {
    marginBottom: 7 * scale,
    flexDirection: 'row',
    paddingLeft: 12 * scale,
    paddingRight: 0,
    alignItems: 'center'
    // justifyContent: 'flex-end',
  },
  itemLightName: {
    justifyContent: 'flex-start',
  },
  itemAccount: {
    fontSize: 12 * scale,
    color: '#272727',
  },
  itemDayTime: {
    // justifyContent: 'flex-end',
    flexDirection: 'row',
    position: 'relative',
    alignItems: 'center',
    paddingLeft: 12 * scale,
    // flex: 1,
  },
  consent: {
    paddingRight: 20 * scale,
    paddingLeft: 20 * scale,
    paddingTop: 8 * scale,
    paddingBottom: 8 * scale,
    fontSize: 12 * scale,
    opacity: 1,
    color: '#ffffff',
    alignItems: 'center',
    borderWidth: 1 * scale,
    borderStyle: 'solid',
    borderColor: style.color.themeColor,
    borderRadius: 15 * scale,
    marginLeft: 130 * scale,
    flexDirection: 'row',
    backgroundColor: style.color.themeColor,
    overflow: 'hidden'
  },
  consentColor: {
    // backgroundColor: style.color.themeColor,
  },
  itemdown: {
    fontSize: 12 * scale,
    color: style.color.themeColor,
    alignItems: 'center',
    paddingRight: 20 * scale,
    paddingLeft: 20 * scale,
    paddingTop: 8 * scale,
    paddingBottom: 8 * scale,
    borderWidth: 1 * scale,
    borderStyle: 'solid',
    borderColor: style.color.themeColor,
    borderRadius: 15 * scale,
    marginRight: 15 * scale,
    flexDirection: 'row',
    marginLeft: 10 * scale,
  },
  itemTime: {
    flexDirection: 'row',
    flex: 1,

  },
  itemWrap: {
    backgroundColor: '#fff',
    width: '100%',
    borderRadius: 8 * scale,
    marginTop: 6 * scale,
    // paddingLeft: 12 * scale,
    // paddingRight: 12 * scale,
    // paddingBottom: 14 * scale,
    paddingTop: 14 * scale,
  },
  itemType: {
    // flex: 4
  },
  itemLightColor: {
    // justifyContent: 'flex-end',
    fontSize: 12 * scale,

    marginRight: 10 * scale,
    color: style.color.themeColor,
    fontWeight: '500',
  },
  itemLightText: {
    color: '#000000',
    fontSize: 12 * scale,
    fontWeight: '500',
  },
  itemBorder: {
    height: 1 * scale,
    backgroundColor: '#E3E7F0',
    marginBottom: 15 * scale,
  },

  itemTypeName: {
    width: 16 * scale,
    height: 16 * scale,
    marginLeft: 10 * scale,
  },
  itemContent: {
    flexDirection: 'row',
    alignItems: 'center',
    position: 'relative',
    marginBottom: 15 * scale,
    paddingLeft: 12 * scale,
  },
  itemContentRemark: {
    flexDirection: 'row',
    alignItems: 'center',
    position: 'relative',
    marginBottom: 12 * scale,
    paddingLeft: 12 * scale,
    paddingTop: 20 * scale,
  },
  itemContractNumber: {
    color: '#000000',
    fontSize: 12 * scale,
    flex: 4,
  },
  itemContractName: {
    color: '#000000',
    fontSize: 12 * scale,
    fontWeight: '600',
    flex: 4
  },
  ItemRemarks: {
    color: '#000000',
    fontSize: 12 * scale,
    flex: 2
  },
  itemArrowIcon: {
    flexDirection: 'row',
    position: 'relative',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#000000'
  },
  arrowIcon: {

    justifyContent: 'center',
  },
  itemApplyAmount: {
    flexDirection: 'row',
    alignItems: 'flex-end',
    paddingRight: 10 * scale,
  },
  itemNumber: {
    color: '#000000',
    fontSize: 12 * scale,
    fontWeight: '600',
    flex: 2,
    color: '#0087FF'
  },
  itemApprovalFlow: {
    justifyContent: 'flex-start',
    color: '#0087FF',
    fontWeight: '600'
  },
  textRow: {
    marginBottom: 20 * scale
  },
  textRowText: {
    paddingLeft: 15 * scale
  },
  downImg: {
    width: 10 * scale,
    height: 10 * scale,
    padding: 10 * scale
  },
  more: {
    padding: 15 * scale,
    flexDirection: 'row',
    position: 'relative',
    alignItems: 'center',
    justifyContent: 'center',
    // backgroundColor: '#000000'
  },
  itemBody: {
    position: 'relative',
    overflow: 'hidden',
    backgroundColor: '#fff'
  },
  goodsItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 7 * scale,
    marginBottom: 8 * scale,
    height: 20 * scale,

    paddingLeft: 14 * scale,
    paddingRight: 14 * scale,
  },
  itemName: {
    flexDirection: 'row',
    marginBottom: 10 * scale,
    // marginTop: 5 * scale,
    paddingLeft: 12 * scale,
    paddingRight: 12 * scale,
    alignItems: 'center',
  },
})